<template>
  <div id="cart">
    <NavBar class="home-nav">
      <div slot="center">购物车</div>
    </NavBar>
    <SearchInput />
    <Scroll class="content">
      <div class="cart_main" v-if="cartList.length != 0">
        <!-- 当cart数组 长度不为0 显示 商品信息 -->

        <div class="cart_item" v-for="cart in cartList" :key="cart.goods_id">
          <!-- 复选框 -->
          <input
            type="checkbox"
            class="chk_list"
            :checked="cart.checked"
            @change="handeItemChange(cart, $event)"
          />
          <!-- 商品图片 -->
          <a class="cart_img_wrap">
            <img :src="cart.goods_small_logo" />
          </a>
          <!-- 商品信息 -->
          <div class="cart_info_wrap">
            <div class="goods_name">{{ cart.goods_name }}</div>
            <div class="goods_price_wrap">
              <div class="goods_price">￥{{ cart.goods_price }}</div>

              <div class="cart_num_tool">
                <a
                  href="javascript:;"
                  class="mins"
                  @click="handleEdit('-', cart)"
                  >-</a
                >
                <input
                  autocomplete="off"
                  type="text"
                  minnum="1"
                  class="txt"
                  :value="cart.num"
                />
                <a
                  href="javascript:;"
                  class="plus"
                  @click="handleEdit('+', cart)"
                  >+</a
                >
                <!-- <input type="checkbox" @click="handlecartNumEdit"  class="num_edit">-</div>
                <div class="goods_num">{{cart.num}}</div>
                <input type="checkbox" @click="handlecartNumEdit"  class="num_edit">+</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>

    </Scroll>      <div  class="cart_null" v-if="cartList.length == 0">
        <h4>您的购物车空空如也</h4>
        <img
        style="width:100%;margin-top:25%"
          src="~assets/cart.gif"
        />
      </div>
      
    <div class="footer_tool">
      <!-- 总价格 -->
      <div class="check_wrap">
        <input
          class="all_chk_wrap"
          type="checkbox"
          :checked="allChecked && cartList.length > 0"
          @change="updateAllCartChecked"
        />
        <span>全选</span>
        <span v-if="isAllCheck && cartList.length > 0" @click="deleteAll"> 删除</span>
      </div>
      <div class="total_price_wrap">
        <div class="total_price">
          <span>合计:</span>
          <span class="total_price_text">￥{{ totalPrice }}</span>
        </div>
        <p>包含运费</p>
      </div>

      <!-- 结算 -->
      <div class="order_pay">结算({{ totalNum }})</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CartIndex",

  data() {
    return {
      allChecked: true,
      totalPrice: 0,
      totalNum: 0,
      cartList: [],
    };
  },
  beforeMount() {
    this.cartList = JSON.parse(sessionStorage.getItem("cart")) || [];
  },
  mounted() {
    this.setCart(this.cartList);
  },
  computed: {
    //   cartList() {
    //     return JSON.parse(sessionStorage.getItem("cart")) || [];
    //   },
    //   //判断底部复选框是否勾选【全部产品都选中，采勾选】
    isAllCheck() {
      //遍历数组里面原理，只要全部元素isChecked属性都为1===>真 true
      //只要有一个不是1======>假false
      return this.cartList.every((item) => item.checked);
    },
  },
  //   // totalPrice() {
  //   //   let sum = 0;
  //   //   // let newList= this.cartList.filter((item) => item.checked );
  //   //
  //   //   return sum;
  //   // },
  // },
  methods: {
    // 设置购物车状态同时 重新计算 底部工具栏的数据 全选 总价格 购买的数量
    setCart(cart) {
      let allChecked = true;
      // 1 总价格 总数量

      // 1 总价格 总数量
      let totalPrice = 0;
      let totalNum = 0;
      cart.forEach((v) => {
        if (v.checked) {
          totalPrice += v.num * v.goods_price;
          totalNum += v.num;
        } else {
          allChecked = false;
        }
      });
      this.totalPrice = totalPrice;
      this.totalNum = totalNum;
      this.allChecked = allChecked;
      this.cartList = cart;

      sessionStorage.setItem("cart", JSON.stringify(cart));
    },
    handeItemChange(cart) {
      // let index = this.cartList.findIndex((v) => v.goods_id === cart.goods_id);

      // this.cartList[index].checked = !this.cartList[index].checked;
      // this.setCart(this.cartList);
      // console.log(event.target.checked);

      console.log(cart.checked);
      cart.checked = !cart.checked;
      this.setCart(this.cartList);
    },

    updateAllCartChecked() {
      this.allChecked = !this.allChecked;
      this.cartList.map((item) => {
        return (item.checked = this.allChecked);
      });
      // cart.forEach(v => v.checked = allChecked);
      this.setCart(this.cartList);
      // 3 循环修改cart数组 中的商品选中状态
    },

    handleEdit(type, item) {
      //  const index = cart.findIndex(v => v.goods_id === id);
      const index = this.cartList.findIndex(
        (v) => v.goods_id === item.goods_id
      );
      // 4 判断是否要执行删除
      console.log(index);
      let num = this.cartList[index].num;
      console.log(num);
      if (type === "-") {
        // 4.1 弹窗提示 &&
        if (this.cartList[index].num == 1) {
          //  this.$message.warning('商品至少保留一件');

          this.$confirm(`你确定删除${item.goods_name}?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.cartList.splice(index, 1);
            this.setCart(this.cartList);
          });
          return;
        }

        this.cartList[index].num -= 1;
        this.setCart(this.cartList);
      } else {
        // 4  进行修改数量
        this.cartList[index].num += 1;
        // 5 设置回缓存和data中
      }
      this.setCart(this.cartList);
    },
    deleteAll() {
      this.$confirm(`你确定删除所有?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.cartList = [];
        this.setCart(this.cartList);
        this.$message.warning("删除成功")
      });
    },
  },
};
</script>

<style lang="less" scoped>
#cart {
  /*padding-top: 44px;//100%视口*/
  height: 100vh;
  position: relative;
}

.content {
  position: absolute;
  top: 88px;
  bottom: 49px;
  left: 0;
  right: 0;
  overflow: hidden;
}
.cart_item {
  display: flex;
  padding: 10px;

  border-bottom: 1px solid #ccc;

  .chk_list {
    margin-top: 10%;

    flex: 0.5;
  }
  .cart_img_wrap {
    flex: 2;

    img {
      width: 80%;
    }
  }
  .cart_info_wrap {
    flex: 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods_name {
      color: #666;
    }
    .goods_price_wrap {
      display: flex;
      justify-content: space-between;
      .goods_price {
        color: var(--color-tint);
        font-size: 24px;
      }
    }
  }
  .cart_num_tool {
    display: flex;
    .mins {
      border: 1px solid #ddd;
      border-right: 0;

      color: #666;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
    }

    input {
      border: 1px solid #ddd;
      width: 25px;
      height: 25px;

      text-align: center;
      font-size: 14px;
    }

    .plus {
      border: 1px solid #ddd;
      border-left: 0;

      color: #666;
      width: 25px;
      height: 25px;
      line-height: 25px;
      text-align: center;
    }
  }
}
.cart_null{
 margin-top:25%;
text-align: center;
}
.footer_tool {
  position: fixed;
  bottom: 49px;
  left: 0;
  width: 100%;
  height: 45px;

  background-color: #fff;
  display: flex;
  border-top: 1px solid #ccc;
  .check_wrap {
    flex: 2;
    line-height: 45px;
  }

  .total_price_wrap {
    flex: 4;
    padding-right: 15px;
    text-align: right;

    .total_price_text {
      color: var(--color-tint);

      font-weight: 600;
    }
  }

  .order_pay {
    line-height: 45px;
    flex: 3;
    text-align: center;
    background-color: var(--color-tint);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
  }
}
</style>
